<template>
  <el-main>
    <!--搜索筛选表单区域-->
    <el-form ref="queryForm"
             :model="cpcMemberQueryParams"
             :inline="true"
             label-width="68px"
             label-position="right">
      <el-form-item label="姓名"
                    label-width="40px">
        <el-input v-model="cpcMemberQueryParams.name"
                  clearable
                  size="small"
                  style="width: 140px"
                  @keyup.enter.native="cpcMemberQuery" />
      </el-form-item>
      <el-form-item label="性别"
                    label-width="40px">
        <el-select v-model="cpcMemberQueryParams.gender"
                   clearable
                   size="small"
                   style="width: 100px">
          <el-option key="0"
                     label="男"
                     value="0" />
          <el-option key="1"
                     label="女"
                     value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="cpcMemberQueryParams.phone"
                  clearable
                  size="small"
                  style="width: 180px"
                  @keyup.enter.native="cpcMemberQuery" />
      </el-form-item>
      <el-form-item label="现居住地">
        <el-input v-model="cpcMemberQueryParams.address"
                  clearable
                  size="small"
                  style="width: 180px"
                  @keyup.enter.native="cpcMemberQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="cpcMemberQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetMemberQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--身份认证审核、导入、新增、导出、删除-->
    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-badge is-dot
                  class="item">
          <el-button size="mini"
                     type="warning"
                     @click="handleIdentify"
                     plain>身份认证审核</el-button>
        </el-badge>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-download"
                   size="mini"
                   @click="handleImport">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   size="mini"
                   @click="cpcMemberAddDialogFlag = true">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   @click="deleteCpcMember">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-upload2"
                   size="mini"
                   :loading="export_loading"
                   @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <!--身份认证审核对话框：待处理和历史记录-->
    <el-dialog :visible.sync="cpcMemberIdentifyDialogFlag"
               title="身份认证审核"
               center>
      <el-row class="mb8">
        <el-col :span="12" :offset="12" style="text-align: right">
            <el-button type="primary" size="mini" v-if="!previousIdentifyFlag" @click="handlePreviousIdentify">查看历史记录</el-button>
            <el-button type="primary" size="mini" v-if="previousIdentifyFlag" @click="handleNewIdentify">查看待处理认证</el-button>
        </el-col>
      </el-row>

      <el-table
        ref="newIdentifyTable"
        key="new"
        v-if="!previousIdentifyFlag"
        :data="displayIdentifyList"
        style="width: 100%"
        max-height="300"
      >
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="姓名">
                <span>{{ props.row.user_name }}</span>
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ props.row.gender === '0'?'男':'女' }}</span>
              </el-form-item>
              <el-form-item label="年龄">
                <span>{{ props.row.age }}</span>
              </el-form-item>
              <el-form-item label="民族">
                <span>{{ props.row.nationality }}</span>
              </el-form-item>
              <el-form-item label="籍贯">
                <span>{{ props.row.native_address }}</span>
              </el-form-item>
              <el-form-item label="出生日期">
                <span>{{ props.row.birth_date }}</span>
              </el-form-item>
              <el-form-item label="入党日期">
                <span>{{ props.row.party_date }}</span>
              </el-form-item>
              <el-form-item label="身份证号">
                <span>{{ props.row.ID_number }}</span>
              </el-form-item>
              <el-form-item label="联系方式">
                <span>{{ props.row.user_phone }}</span>
              </el-form-item>
              <el-form-item label="现居住地">
                <span>{{ props.row.user_address }}</span>
              </el-form-item>
              <el-form-item label="申请时间">
                <span>{{ props.row.apply_time }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="申请人"
          prop="user_name"
          width="70"
        >
        </el-table-column>
        <el-table-column
          label="身份证号"
          prop="ID_number">
        </el-table-column>
        <el-table-column
          label="联系方式"
          prop="user_phone"
          min-width="110"
        >
        </el-table-column>
        <el-table-column
          label="现居住地"
          prop="user_address">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="handleApprove(scope.row, scope.$index)"
            >通过</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-close"
              @click="handleReject(scope.row, scope.$index)"
            >驳回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        ref="previousIdentifyTable"
        key="previous"
        v-if="previousIdentifyFlag"
        :data="displayIdentifyList"
        style="width: 100%"
        max-height="300"
      >
        <el-table-column
          label="姓名"
          prop="user_name"
          width="70"
        >
        </el-table-column>
        <el-table-column
          label="联系方式"
          prop="user_phone"
          width="110"
        >
        </el-table-column>
        <el-table-column
          label="现居住地"
          prop="user_address">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          width="70"
        >
        </el-table-column>
        <el-table-column
          label="处理人"
          prop="reviewer"
          width="70"
        >
        </el-table-column>
        <el-table-column
          label="处理时间"
          prop="sync_time"
          width="150"
        >
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cpcMemberIdentifyDialogFlag = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :visible.sync="importMemberDialogFlag"
               title="批量导入党员"
               center
               width="400px"
               append-to-body>
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
<!--            <i>下载模板</i>-->
            <div>提示：请先<a style="color: red; text-decoration: underline">下载模板</a>，填入党员信息后提交</div>
          </div>
        </template>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmitFile">确 定</el-button>
        <el-button @click="importMemberDialogFlag = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--          添加党员对话框-->
    <el-dialog :visible.sync="cpcMemberAddDialogFlag"
               title="添加党员"
               center
               :before-close="handle_add_cpc_dialog_close">
      <!--            进度条-->
      <el-row style="margin-bottom: 10px">
        <el-col :span="16" offset="4">
          <el-steps :active="active" finish-status="success" align-center>
            <el-step title="检索用户"></el-step>
            <el-step title="添加党员信息"></el-step>
          </el-steps>
        </el-col>
      </el-row>
      <!--            进度条第一步-->
      <el-form v-if="active===0"
               :inline="true"
               :model="addMemberSearchFormParams"
               class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input style="width: 90px"
                    size="mini"
                    v-model="addMemberSearchFormParams.name">
          </el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input style="width: 120px" size="mini" v-model="addMemberSearchFormParams.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input style="width: 150px" size="mini" v-model="addMemberSearchFormParams.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handleAddMemberSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-if="active===0"
        :data="addSearchResult"
        highlight-current-row
        @current-change="handleMemberSearchResultSelect"
        max-height="300"
        style="width: 100%">
        <el-table-column
          property="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          property="gender"
          label="性别">
        </el-table-column>
        <el-table-column
          property="birth_date"
          label="出生日期"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column
          property="phone"
          label="联系方式"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="地址"
          min-width="120px"
        >
        </el-table-column>
      </el-table>
      <!--            进度条第二步-->
      <el-form
        v-if="active===1"
        ref="new_cpc_form"
        :model="newMemberInfo"
        label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="newMemberInfo.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="newMemberInfo.ID_number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="newMemberInfo.gender" disabled
                         size="small" style="width: 100px">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族">
              <el-input v-model="newMemberInfo.nation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯">
              <el-input v-model="newMemberInfo.register_add"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="newMemberInfo.birth_date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入党时间">
              <el-date-picker
                v-model="newMemberInfo.join_date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="newMemberInfo.phone" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现居住地">
              <el-input v-model="newMemberInfo.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注信息">
          <el-input v-model="newMemberInfo.remark"></el-input>
        </el-form-item>
      </el-form>
      <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
      <span slot="footer" class="dialog-footer" style="text-align: center">
<!--              <el-button @click="">添 加</el-button>-->
            <el-button @click="handle_add_cpc_dialog_close">取 消</el-button>
            <el-button
              v-if="active===0"
              @click="handleNext"
              :disabled="!currentMemberRow"
              plain
              type="success">下一步</el-button>
            <el-button v-if="active===1"
                       @click="add_cpc_member"
                       plain
                       type="success">完 成</el-button>
          </span>
    </el-dialog>

    <!--党员名单表格区-->
    <el-table v-loading="query_loading"
              :data="cpc_list"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="50"
                       align="center" />
      <el-table-column label="身份证号"
                       align="center"
                       prop="ID_number"
                       width="180" />
      <el-table-column label="姓名"
                       align="center"
                       prop="name" />
      <el-table-column label="手机号码"
                       align="center"
                       prop="phone"
                       width="120" />
      <el-table-column label="性别"
                       align="center"
                       prop="gender"
                       width="60" />
      <el-table-column label="出生日期"
                       align="center"
                       prop="birth"
                       width="120" />
      <el-table-column label="党龄"
                       align="center"
                       prop="cpc_age"
                       width="60" />
      <el-table-column label="现居住地"
                       align="center"
                       prop="address"
                       width="200"
                       :show-overflow-tooltip="true" />
      <!--            <el-table-column label="备注" align="center" prop="remark" width="120" :show-overflow-tooltip="true"/>-->
      <el-table-column label="操作"
                       align="center"
                       width="160"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--                <el-button size="mini"-->
          <!--                           type="text"-->
          <!--                           icon="el-icon-view">查看</el-button>-->
          <el-button size="mini"
                     type="text"
                     icon="el-icon-view">查看</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="edit_cpc_member_dialog_flag = true">编辑</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="deleteCpcMember">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <pagination v-show="total>0"
                :total="total"
                :page.sync="cpcMemberQueryParams.pageNum"
                :limit.sync="cpcMemberQueryParams.pageSize"
                @pagination="getList" />

    <!--          编辑党员信息对话框-->
    <el-dialog :visible.sync="edit_cpc_member_dialog_flag"
               title="编辑党员信息"
               center>
      <el-form
        label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="cpc_list[0].name" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="身份证号">
              <el-input v-model="cpc_list[0].ID_number" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="cpc_list[0].gender"
                         size="small" style="width: 100px">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族">
              <el-input v-model="cpc_list[0].nation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯">
              <el-input v-model="cpc_list[0].register_add"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-date-picker
                :default-value="new Date('5/1/1974')"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入党时间">
              <el-date-picker
                :default-value="new Date('5/1/1997')"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="cpc_list[0].phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现居住地">
              <el-input v-model="cpc_list[0].address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注信息">
          <el-input v-model="cpc_list[0].remark"></el-input>
        </el-form-item>
      </el-form>
      <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
      <span slot="footer" class="dialog-footer" style="text-align: center">
<!--              <el-button @click="">添 加</el-button>-->
            <el-button @click="edit_cpc_member_dialog_flag = false">取 消</el-button>
            <el-button @click="edit_cpc_member" plain type="primary">完 成</el-button>
          </span>
    </el-dialog>
  </el-main>
</template>

<script>

import { cpcMemberData, cpcMembershipIdentificationData } from '../data'

export default {
  name: "member",
  data (){
    return {
      // 身份认证审核对话框是否开启
      cpcMemberIdentifyDialogFlag: false,
      // 身份认证审核对话框是否为历史记录
      previousIdentifyFlag: false,
      // 导入党员名单对话框是否开启
      importMemberDialogFlag: false,
      cpcMemberAddDialogFlag: false,
      edit_cpc_member_dialog_flag: false,
      query_loading: false,
      export_loading: false,
      // 所有身份认证请求信息
      identifyList: cpcMembershipIdentificationData,
      // 当前显示的身份认证请求信息
      displayIdentifyList: null,
      user_queryParams: {
        name: '',
        ID_number: '',
      },
      newMemberInfo: {
        id: '',
        name: '',
        phone: '',
        address: '',
        register_add: '',
        ID_number: '',
        gender: '',
        birth_date: '',
        nation: '',
        age: '',
        join_date: '',
        remark: ''
      },
      // 党员搜索表单参数
      cpcMemberQueryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        gender: undefined,
        phone: undefined,
        address: undefined
      },
      total: 1,
      cpc_list: [
        {
          id: '20481',
          name: '赵启霖',
          phone: '18217769695',
          address: '红星街道绿洲小区9号楼302',
          ID_number: '230403197405010234',
          gender: '男',
          birth: '1974-5-1',
          nation: '汉',
          age: '47',
          join_date: '1998-7-13',
          cpc_age: '23年',
          register_add: '吉林德惠',
          remark: ''
        },
        {
          id: '20442',
          name: '李文秀',
          phone: '18217713318',
          address: '西四街道站前小区1号楼302',
          ID_number: '230403198212010234',
          gender: '女',
          birth: '1982-12-1',
          nation: '汉',
          age: '39',
          join_date: '2004-7-13',
          cpc_age: '17年',
          register_add: '浙江杭州',
          remark: ''
        }
      ],
      active: 0,
      addMemberSearchFormParams: {
        name: undefined,
        phone: undefined,
        address: undefined
      },
      addSearchResult: [
      ],
      currentMemberRow: null,
      not_select: false,
    }
  },
  methods: {

    // 响应“身份认证审核”按钮
    handleIdentify() {
      this.cpcMemberIdentifyDialogFlag = true
      this.handleNewIdentify()
    },

    // 显示未处理的全部身份认证审核信息
    handleNewIdentify() {
      this.previousIdentifyFlag = false
      const temp = []
      for (let i=0; i<this.identifyList.length; i++){
        if (this.identifyList[i].status === '未处理'){
          temp.push(this.identifyList[i])
        }
      }
      this.displayIdentifyList = temp
    },

    // 点击显示处理过的身份认证审核信息历史记录
    handlePreviousIdentify() {
      this.previousIdentifyFlag = true
      const temp = []
      for (let i=0; i<this.identifyList.length; i++){
        if (this.identifyList[i].status !== '未处理'){
          temp.push(this.identifyList[i])
        }
      }
      this.displayIdentifyList = temp
    },

    // 响应“通过”身份认证请求按钮
    handleApprove(row, index){
      this.identifyList.map((value, index, arr) => {
        if(value.id === row.id) {
          arr[index].status = '已通过'
          arr[index].reviewer = '张光北'
          arr[index].sync_time = '2021-7-26 10:00:10'
        }
      })
      this.displayIdentifyList.splice(index, 1)
      this.$message({
        message: '操作成功，您已添加该用户为党员',
        type: 'success'
      })
    },

    // 响应“驳回”身份认证请求按钮
    handleReject(row, index){
      this.identifyList.map((value, index, arr) => {
        if(value.id === row.id) {
          arr[index].status = '已驳回'
          arr[index].reviewer = '张光北'
          arr[index].sync_time = '2021-7-26 10:00:10'
        }
      })
      this.displayIdentifyList.splice(index, 1)
      this.$message('您已驳回该身份认证请求')
    },

    // 响应“导入”党员按钮
    handleImport () {
      this.importMemberDialogFlag = true

    },

    // 响应导入页面确定按钮，提交文件批量导入党员
    handleSubmitFile(){
      this.importMemberDialogFlag = false
    },

    next() {
      if (this.active++ > 1) this.active = 0;
    },

    handleNext() {
      this.next()
      this.newMemberInfo.name = this.addSearchResult[0].name
      this.newMemberInfo.gender = this.addSearchResult[0].gender
      this.newMemberInfo.birth_date = this.addSearchResult[0].birth_date
      this.newMemberInfo.phone = this.addSearchResult[0].phone
      this.newMemberInfo.address = this.addSearchResult[0].address
    },

    // 响应添加党员对话框Step1的搜索按钮
    handleAddMemberSearch() {
      this.addSearchResult.push({
        name: '王政道',
        gender: '男',
        birth_date: '1969年2月18日',
        phone: '18217758574',
        address: '盛唐小区9号楼310'
      })
    },

    // 响应检索用户结果选择的变化
    handleMemberSearchResultSelect(val) {
      this.currentMemberRow = val
    },

    handle_add_cpc_dialog_close(){
      this.active = 0
      this.cpcMemberAddDialogFlag = false
      this.newMemberInfo.ID_number = ''
    },

    get_cpc_member_list () {
      this.query_loading = true
      console.log('query', this.cpcMemberQueryParams)
      this.query_loading = false
    },

    cpcMemberQuery () {
      this.cpcMemberQueryParams.pageNum = 1
      this.get_cpc_member_list()
    },

    resetMemberQuery () {
      console.log('reset cpcMemberQueryParams')
    },

    pass_cpc_member_check (row) {
      row.state = '已批准'
      this.$message({
        message: '操作成功，您已添加该用户为党员',
        type: 'success'
      })
    },

    reject_cpc_member_check (row) {
      row.state = '已驳回'
      this.$message('您已驳回该身份认证请求')
    },

    add_cpc_member() {
      // this.cpc_list.push(this.newMemberInfo)
      this.cpcMemberAddDialogFlag = false
      this.$message({
        message: '操作成功，您已添加该用户为党员',
        type: 'success'
      })
    },

    handleAdd () {
      console.log('add cpc')
    },

    deleteCpcMember() {
      this.$confirm('删除该条党员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    edit_cpc_member() {
      this.$message({
        message: '修改党员信息成功!',
        type: 'success'
      });
      this.edit_cpc_member_dialog_flag = false;
    },

    handleExport () {
      console.log('export cpc')
    },

    handleSelectionChange () {
      console.log('select user')
    }
  }
}
</script>

<style scoped>

</style>
